<template>
  <div class="special-search-condition">
    <div v-for="item in listData"
         :key="item.id"
         class="special-search-condition-row">
      <div class="special-search-condition-row-label"
           :title="item.templateName"> {{ item.templateName }}</div>
      <div class="special-search-condition-row-spaceline"></div>
      <div v-for="subItem in item.values"
           :class="['special-search-condition-row-item', {'special-search-condition-row-item-active': selectedValue == (item.templateId + '-' + subItem.id)}]"
           :key="subItem.id"
           v-html="subItem.name"
           @click="itemClicked(subItem.id, item.templateId)"></div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      listData: {
        type: Array,
        default: () => {
          return [];
        }
      },
      selectedValue: {
        type: String,
        default: () => {
          return '';
        }
      }
    },
    data() {
      return {};
    },
    methods: {
      itemClicked(id, templateId) {
        this.$emit('itemClicked', { id, templateId });
      }
    }
  };
</script>

<style lang="scss" scoped>
  .special-search-condition {
    margin: 12px 0px 0px 16px;
    padding: 0px 0px 6px 0px;
    border-radius: 2px;
    background: #f5f6f9;
    max-height: 87px;
    overflow-x: hidden;
    overflow-y: scroll;
    .special-search-condition-row {
      display: flex;
      flex-wrap: wrap;

      .special-search-condition-row-label {
        width: 112px;
        flex: 0 0 auto;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 14px;
        color: #111;
        padding-top: 6px;
        padding-left: 8px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .special-search-condition-row-spaceline {
        width: 1px;
        height: 16px;
        background: #d9d9d9;
        margin: 8px 0px 0px 8px;
      }
      .special-search-condition-row-item {
        color: #333333;
        cursor: pointer;
        padding: 6px 8px 0px 8px;
        flex: 0 0 auto;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 14px;
      }

      .special-search-condition-row-item:hover {
        color: #1890ff;
        color: var(--theme-brand6, #1890ff);
      }

      .special-search-condition-row-item-active {
        color: #1890ff;
        color: var(--theme-brand6, #1890ff);
      }
    }
  }
</style>
